<!DOCTYPE html>
<!--声明 Thymeleaf 的命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>

<!-- 引入bootstrap的日期的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入fileinput 文件上传的 css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
<body>
<button onclick="openAdd()" class="btn btn-primary glyphicon glyphicon-plus" type="button">新增影厅</button>
<table class="table" id="myTable"></table>
</body>
<script th:inline="javascript">
    $('#myTable').bootstrapTable({
        toolbar:'#toolbar',//工具栏
        url:'../cinema/queryHall',//获取数据地址
        pagination:true, //是否展示分页
        pageList:[2, 4, 6, 10],//分页组件
        pageNumber:1,//默认页码
        pageSize:2,//默认每页条数
        sidePagination:'server',//分页方式：client客户端分页，server服务端分页（*
        striped:true,//斑马线
        queryParams:function(){
            return {
                page: this.pageNumber,
                rows: this.pageSize
            };
        },
        columns:[
            {field:"checkbox",checkbox:true},
            {field:"cinemaName",title:"影院名称"},
            {field:"hallname",title:"影厅名称"},
            {field:"count",title:"座位数量",
                formatter:function(value,row,index){
                    return row.row*row.column;
                }
            },
            {field:"tool",title:"操作",formatter:function(value,row,index){
                    return "<a href='javascript:upHallOpen("+row.hallId+")'>修改</a>"+" | "+
                           "<a href='javascript:delHall("+row.hallId+")'>去除影厅</a>";
                }}
        ]
    });
    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,//同步
            success:function(data){
                res = data;
            }
        });
        return res;
    }
    //新增影厅
    function openAdd() {
        bootbox.dialog({
            title:'新增影厅',
            message: createAddContent("../page/toAddHall"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"../cinema/addHall",
                            type:'post',
                            data:$("#hallForm").serialize(),//表单序列化
                            success:function(data){
                                alert("添加影厅成功")
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });

    }
    //修改影厅
    function upHallOpen(hallId) {
        bootbox.dialog({
            title:'修改影厅',
            message: createAddContent("../page/toAddHall"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"../cinema/addHall",
                            type:'post',
                            data:$("#hallForm").serialize(),//表单序列化
                            success:function(data){
                                alert("更改成功")
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
        $.ajax({
            url:'../cinema/getHallById',
            async:false,
            data:{hallId,hallId},
            success:function (data) {
                $("#name").val(data.hallname);
                $("#hallId").val(data.hallId);
                $("#row").val(data.row);
                $("#column").val(data.column);
            }
        })
    }
    //删除影厅
    function delHall(hallId) {
        bootbox.confirm({
            size: "small",
            title: "提示",
            message: "是否确认删除？",
            buttons: {
                confirm: {
                    label: '确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function(result){
                if(result){//删除
                    //调用ajax请求后台，回调刷新表格
                    $.ajax({
                        url:"../cinema/delHall",
                        type:"post",
                        data:{id:hallId},
                        success:function(data){
                            $('#myTable').bootstrapTable("refresh");
                            //刷新表格:有条查调用条查，没有条查自己写refresh方法

                        }
                    })
                }
            }
        })
    }
</script>
</html>